<template>
  <view class="content">
    <!-- 宫格组件 -->
	<image src="../static/images/home_bg.png" class="iconBac" >
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false">
        <uni-grid-item>
          <view class="grid-item-box" @click="goDetail(1)">
            <image src="../static/images/home_icon_xsgl.png" class="iconSty" >
            </image>
            <text class="iconText">线索管理</text>
          </view>
        </uni-grid-item>
		
		<uni-grid-item>
		  <view class="grid-item-box" @click="goDetail(9)">
		    <image src="../static/images/home_icon_edsq.png" class="iconSty" >
		    <text class="iconText">额度申请</text>
		  </view>
		</uni-grid-item>
		
		<uni-grid-item>
		  <view class="grid-item-box" @click="goDetail(19)">
		    <image src="../static/images/home_icon_rkgl.png" class="iconSty" >
		    <text class="iconText">入库管理</text>
		  </view>
		</uni-grid-item>

        <uni-grid-item>
          <view class="grid-item-box" @click="goDetail(4)">
            <image src="../static/images/home_icon_ckgl.png" class="iconSty" >
            <text class="iconText">出库管理</text>
          </view>
        </uni-grid-item>
      </uni-grid>
	  <view class="grid-box">
		  <view class="grid-box-title"> 
			  <uni-icons type="smallcircle-filled" color="#1890FF" size="12"></uni-icons>
			  <view class="grid-box-text">车务专区</view>
		  </view>
		  <uni-grid :column="3" :showBorder="false" class="grid-box-body">
			  <uni-grid-item>
				<view class="grid-item-box" @click="goDetail(17)">
				  <image src="../static/images/home_icon_xctb.png" class="iconStys" >
				  <text class="text">新车投保工单</text>
				</view>
			  </uni-grid-item>
			  <uni-grid-item>
				  <view class="grid-item-box" @click="goDetail(13)">
						<image src="../static/images/home_icon_zsgd.png" class="iconStys" >
						<text class="text">装饰工单</text>
				   </view>
			  </uni-grid-item>
			  <uni-grid-item>
				  <view class="grid-item-box" @click="goDetail(8)">
					  <image src="../static/images/home_icon_spgd.png" class="iconStys" >
					  <text class="text">上牌工单</text>
					</view>
			  </uni-grid-item>
			  <uni-grid-item>
				  <view class="grid-item-box" @click="goDetail(14)">
						<image src="../static/images/home_icon_gzsgd.png" class="iconStys" >
						<text class="text">购置税工单</text>
				   </view>
			  </uni-grid-item>
			  <uni-grid-item>
				  <view class="grid-item-box" @click="goDetail(6)">
					  <image src="../static/images/home_icon_gps.png" class="iconStys" >
					  <text class="text">GPS管理</text>
				</view>
			  </uni-grid-item>
			  <uni-grid-item>
				  <view class="grid-item-box" @click="goDetail(15)">
					<image src="../static/images/home_icon_wxgd.png" class="iconStys" >
					<text class="text">维修工单</text>
				   </view>
			  </uni-grid-item>
			  <uni-grid-item>
				  <view class="grid-item-box" @click="goDetail(12)">
					  <image src="../static/images/home_icon_njgd.png" class="iconStys" >
					  <text class="text">年检工单</text>
					</view>
			  </uni-grid-item>
			  <uni-grid-item>
				  <view class="grid-item-box" @click="goDetail(10)">
						<image src="../static/images/home_icon_ghltgd.png" class="iconStys" >
						<text class="text">更换轮胎工单</text>
				   </view>
			  </uni-grid-item>
			  <uni-grid-item>
					  <view class="grid-item-box" @click="goDetail(7)">
							<image src="../static/images/home_icon_bygd.png" class="iconStys" >
							<text class="text">保养工单</text>
					   </view>
			  </uni-grid-item>
		  </uni-grid>
 		 
	  </view>
	  <view class="grid-boxs">
	  		  <view class="grid-box-title"> 
	  			  <uni-icons type="smallcircle-filled" color="#1890FF" size="12"></uni-icons>
	  			  <view class="grid-box-text">常用工具</view>
	  		  </view>
	  		  <uni-grid :column="3" :showBorder="false" class="grid-box-body">
	  			  <uni-grid-item>
	  				<view class="grid-item-box" @click="goDetail(20)">
						<image src="../static/images/home_icon_clsq.png" class="iconStys" >
						<text class="text">常规处置申请</text>
					  </view>
	  			  </uni-grid-item>
	  			  <uni-grid-item>
	  				  <view class="grid-item-box" @click="goDetail(21)">
						  <image src="../static/images/home_icon_clgl.png" class="iconStys" >
						  <text class="text">常规处置处理</text>
						</view>
	  			  </uni-grid-item>
	  			  <uni-grid-item>
	  				 <view class="grid-item-box" @click="goDetail(31)">
						 <image src="../static/images/home_icon_bfcz.png" class="iconStys" >
						 <text class="text">报废处置</text>
					   </view>
	  			  </uni-grid-item>
	  			  <uni-grid-item>
	  				  <view class="grid-item-box" @click="goDetail(30)">
						 <image src="../static/images/home_icon_czyj.png" class="iconStys" >
						 <text class="text">处置预警</text>
					   </view>
	  			  </uni-grid-item>
	  			  <uni-grid-item>
	  				   <view class="grid-item-box" @click="goDetail(32)">
						  <image src="../static/images/home_icon_zggh.png" class="iconStys" >
						  <text class="text">租购过户</text>
						</view>
	  			  </uni-grid-item>
	  			  <uni-grid-item>
	  				   <view class="grid-item-box" @click="goDetail(18)">
						  <image src="../static/images/home_icon_bxlp.png" class="iconStys" >
						  <text class="text">保险理赔</text>
						</view>
	  			  </uni-grid-item>
	  		  </uni-grid>
	   		 
	  </view>
    </view>
  </view>
  
</template>

<script>
import {getImage} from "@/api/system/user.js";
export default {
	data(){
		return{
			avatar:''
		}
	},
	mounted() {
		uni.getStorage({
			key:"userinfo",
			success:(res)=>{
				this.$store.dispatch('updateUserinfo',res.data??{})
			},
			fail:()=>{
				this.$store.dispatch('updateUserinfo',{})
			}
		})
			// commit('SET_USERINFO', user);
		
	},
  methods: {
    goDetail(type) {
      let url
      switch (type) {
        case 1:
          url = '/pages/CluePage/clue/list'
          break
        case 2:
          url = '/pages/ContractPage/contract/list'
          break
        case 3:
          url = '/pages/RiskWarnPage/yearCheck/list'
          break
        case 4:
          url = '/pages/StoragePage/outStorage/list'
          break
        case 5:
          url = '/pages/TransferPage/transfer/list'
          break
        case 6:
          url = '/pages/CarPage/gps/list'
          break
        case 7:
          url = '/pages/CarPage/maintain/list'
          break
        case 8:
          url = '/pages/CarPage/upCard/list'
          break
        case 9:
          url = '/pages/quota/apply/list/index'

          break
        case 10:
          url = '/pages/CarPage/changeTire/list'
          break
        case 11:
          url = '/pages/CarPage/cancellation/list'
          break
        case 12:
          url = '/pages/CarPage/inspection/list'
          break
        case 13:
          url = '/pages/CarPage/decorationWorkOrder/list'
          break
        case 14:
          url = '/pages/CarPage/purchaseTax/list'
          break
        case 15:
          url = '/pages/CarPage/repair/list'
          break
        case 16:
          url = '/pages/CarPage/renewal/list'
          break
        case 17:
          url = '/pages/CarPage/newCarInsure/list'
          break
        case 18:
          url = '/pages/CarPage/insuranceSettlement/list'
          break
        case 19:
          url = '/pages/StoragePage/inStorage/list'
          break
        case 20:
          url = '/pages/VehiclePage/routineApplyFor/list'
          break
        case 21:
          url = '/pages/VehiclePage/routineHandle/list'
          break
        case 30:
          url = '/pages/VehiclePage/vehicleWarning/list'
          break
        case 31:
          url = '/pages/VehiclePage/vehicleScrap/list'
          break
        case 32:
          url = '/pages/VehiclePage/rentPurchaseTransfer/list'
          break
      }
      this.$tab.navigateTo(url)
    },
  },
}
</script>

<style scoped>
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #F7F7F7;
  min-height: 100%;
  height: auto;
}

view {
  font-size: 14px;
  line-height: inherit;
}

/* #endif */
.text {
  text-align: center;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}


/deep/ .grid-boxs .uni-grid-item{
	height: 160rpx !important;
}
@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}
/deep/ .grid-box .uni-grid-item{
	height: 140rpx !important;
}
.grid-box{
	width: 92%;
	margin: 0 auto;
	border-radius: 8px;
	background-color: white;
	padding:20rpx 12rpx ;
}
.grid-boxs{
	width: 92%;
	margin: 0 auto;
	border-radius: 8px;
	background-color: white;
	padding:20rpx 12rpx ;
	margin-top: 20rpx;
}
.iconSty{
	width: 36px;
	height: 36px;
	
}
.iconStys{
	width: 28px;
	height: 28px;
}
.content{
	position: relative;
}
.iconBac{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 156px;
	z-index: -1;
}
.iconText{
	color: #fff;
	
}
.grid-box-title{
	display: flex;
	align-items: center;
	
}
	

.grid-box-body{
	padding: 15px 25px;
}
.grid-box-text{
	font-size: 30rpx;
	font-weight: bold;
	margin-left: 10rpx;
}
</style>
